import { Table, ConfigProvider } from 'antd';
import { ColumnsType } from 'antd/es/table';
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
// antd国际化语言包
import zhCN from 'antd/es/locale/zh_CN'
import en_US from 'antd/es/locale/en_US'


export default function App() {
    let { t, i18n } = useTranslation(['app'])
    let [flag, setFlag] = useState<boolean>(false); // false 标识英文 true表示中文

    const columns: ColumnsType<any> = [
        {
            title: t('name')
        },
        {
            title: t('age')
        },
        {
            title: t('address')
        }
    ]
    let [current, setCurrent] = useState<number>(1);
    let [pageSize, setPageSize] = useState<number>(3);
    let [total, setTotal] = useState<number>(10);

    return (
        <div>
            <button onClick={() => {
                setFlag(!flag);
                let lanuage = flag ? 'en' : 'zh';
                i18n.changeLanguage(lanuage);
            }}>{flag ? '英文' : '中文'}</button>
            <p>信息: {t('hello')}</p>

            <ConfigProvider locale={flag ? zhCN : en_US}>
                <Table
                    columns={columns}
                    pagination={{
                        current,
                        pageSize,
                        total,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: [3, 10, 20]
                    }}
                />
            </ConfigProvider>
        </div>
    )
}
